<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input {
				display: block;
			}
		</style>
	</head>
	<body>
		<ul>
			<input type="text"/>
			<input type="text"/>
			<input type="text"/>
			<input type="text"/>
			<input type="text"/>
			<button>设置</button>
		</ul>
		<script type="text/javascript">
			//需求:点击设置按钮,让所有的input标签获取焦点后高亮显示
			//步骤:
			//1.获取事件源
			//2.绑定事件
			//3.书写事件驱动程序
			
			//1.获取事件源
			var inpArr = document.getElementsByTagName("input");
			var button = inpArr[inpArr.length-1].nextElementSibling || inpArr[inpArr.length-1].nextSibling;
			//2.绑定事件
			button.onclick = function(){
				//3.书写事件程序
				for(var i = 0;i<inpArr.length;i++){
					//当button按钮被点击以后,所有的input标签被绑定事件,onfocus事件;
					inpArr[i].onfocus = function (){
						this.style.border = "2px solid red";
						this.style.backgroundColor = "#ccc";
					}
					//绑定onbulur事件,取消样式
					inpArr[i].onblur = function (){
						this.style.border = "";
						this.style.backgroundColor = "";
					}
				}
			}
		</script>
	</body>
</html>
